import React, {memo} from 'react';
import {Row, Col, Card, Icon, Tooltip, DatePicker} from 'antd';
import {FormattedMessage, formatMessage} from '@/utils/locale';
import styles from './Analysis.less';
import {Pie, WaterWave, Gauge, Field, ChartCard, MiniProgress, MiniBar} from '@/components/Charts';
import Trend from '@/components/Trend';
import MyDeviceTypeSelect from "../../components/MyDeviceTypeSelect";

const {RangePicker} = DatePicker;

const row1ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 12,
  xl: 12,
  style: {marginBottom: 24, paddingRight: 48,},
};

const row2ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 4,
  xl: 4,
  style: {marginBottom: 24,},
};
const row3ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 6,
  xl: 6,
  style: {marginBottom: 24, paddingLeft: 48,},
};


const DeviceDataCard = memo(
  ({loading, devicePieData, deviceData, batteryLowRecord, isActive, handleDatePickerChange, datePickerValue, current_battery_low, history, onChangeQueryTime}) => {
    const batteryLowRecordTotal = batteryLowRecord.reduce((y, b) => {
      return y + b.y
    }, 0);
    // const batteryLowRecordAvg = (batteryLowRecordTotal / batteryLowRecord.length).toFixed(1);
    return (
      <Card loading={loading}
            bordered={false}
            bodyStyle={{padding: 0}}
            title={
              <React.Fragment>
                <FormattedMessage
                  id="app.analysis.dashboard.device.data"
                />
                <MyDeviceTypeSelect/>
              </React.Fragment>
            }
            extra={
              <div className={styles.salesExtraWrap} style={{textAlign: 'center',}}>
                < div className={styles.salesExtra}>
                  {/*<a className={isActive('yesterday')} onClick={() => selectDate('yesterday')}>*/}
                  {/*<FormattedMessage id="app.analysis.all-yesterday" defaultMessage="All Yesterday"/>*/}
                  {/*</a>*/}
                  {/*<a className={isActive('today')} onClick={() => selectDate('today')}>*/}
                  {/*<FormattedMessage id="app.analysis.all-day" defaultMessage="All Day"/>*/}
                  {/*</a>*/}
                  {/*<a className={isActive('week')} onClick={() => selectDate('week')}>*/}
                  {/*<FormattedMessage id="app.analysis.all-week" defaultMessage="All Week"/>*/}
                  {/*</a>*/}
                  {/*<a className={isActive('month')} onClick={() => selectDate('month')}>*/}
                  {/*<FormattedMessage id="app.analysis.all-month" defaultMessage="All Month"/>*/}
                  {/*</a>*/}
                  {/*<a className={isActive('year')} onClick={() => selectDate('year')}>*/}
                  {/*<FormattedMessage id="app.analysis.all-year" defaultMessage="All Year"/>*/}
                  {/*</a>*/}
                </div>
                {/*<RangePicker*/}
                {/*value={rangePickerValue}*/}
                {/*onChange={handleRangePickerChange}*/}
                {/*style={{width: 256}}*/}
                {/*/>*/}
                <DatePicker value={datePickerValue} onChange={handleDatePickerChange}/>
              </div>
            }
      >
        <Row gutter={24}>
          <Col {...row1ResponsiveProps}>
            <Pie
              hasLegend
              subTitle={<FormattedMessage id="app.analysis.dashboard.device.total"/>}
              total={deviceData.device_total}
              data={devicePieData}
              // valueFormat={value => value}
              height={248}
              lineWidth={4}
              onTitleClick={() => {
                history.push('/device')
              }}
            />
          </Col>
          <Col {...row2ResponsiveProps}>
            <ChartCard
              loading={loading}
              bordered={false}
              contentHeight={100}
              style={{marginTop: 48, textAlign: "center",}}
            >
              <WaterWave
                height={161}
                title="设备使用率"
                percent={deviceData.device_usage_rate}
                value={`${deviceData.device_usage_rate} %`}
              />
            </ChartCard>
          </Col>
          <Col {...row3ResponsiveProps}>
            <ChartCard
              bordered={false}
              loading={loading}
              title={"异常次数"}
              // action={
              //   <Tooltip
              //     title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
              //   >
              //     <Icon type="info-circle-o" />
              //   </Tooltip>
              // }
              style={{marginTop: 48, cursor: 'pointer'}}

              total={batteryLowRecordTotal}
              footer={
                <Field
                  label={
                    "当日异常次数"
                  }
                  value={current_battery_low}
                />
              }
              contentHeight={46}
              onClick={() => {
                onChangeQueryTime();
                history.push('/report/error')
              }}
            >

              <MiniBar data={batteryLowRecord}/>
            </ChartCard>
          </Col>
        </Row>
      </Card>
    )
  }
);

export default DeviceDataCard;
